<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="import" href="../../polymer.html">
  </head>
  <body>
    <dom-module id="bad-parent">
      <template>
        <bad-child-one value="{{value}}"></bad-child-one>
      </template>
      <script>
      Polymer({
        is: 'bad-parent',
        properties: {
          value: {
            type: Number,
            value: null
          }
        }
      });
      </script>
    </dom-module>
    <dom-module id="bad-child-one">
      <template>
        <bad-child-two value="[[immediateValue]]"></bad-child-two>
      </template>
      <script>
      Polymer({
        is: 'bad-child-one',
        properties: {
          value: {
            type: Number,
            value: 0,
            notify: true,
            reflectToAttribute: true
          },
          immediateValue: {
            value: 0,
            type: Number,
            notify: true,
            readOnly: true
          }
        },
        observers: [
          'validate(value)',
          'valueChanged(value)',
          'immediateValueChanged(immediateValue)'
        ],
        valueChanged: function(value) {
          this._setImmediateValue(value);
        },
        immediateValueChanged: function() {
          this.value = this.immediateValue;
        },
        bound: function(input) {
          return Math.min(100, Math.max(0, parseFloat(input)));
        },
        validate: function() {
          var v = this.bound(this.value);
          this.value = this.oldValue = isNaN(v) ? this.oldValue : v;
          return this.value !== v;
        }
      });
      </script>
    </dom-module>
    <dom-module id="bad-child-two">
      <script>
      Polymer({
        is: 'bad-child-two',
        properties: {
          value: {
            type: Number,
            value: 0,
            notify: true,
            reflectToAttribute: true
          }
        },
        observers: [
          'validate(value)',
        ],
        bound: function(input) {
          return Math.min(100, Math.max(0, parseFloat(input)));
        },
        validate: function() {
          var v = this.bound(this.value);
          this.value = this.oldValue = isNaN(v) ? this.oldValue : v;
          return this.value !== v;
        }
      });
      </script>
    </dom-module>
    <bad-parent></bad-parent>
  </body>
</html>
